<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>隐私协议 - 社交平台</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #4263EB;
            --gray: #6C757D;
            --light-gray: #F8F9FA;
            --text-dark: #333;
            --text-light: #555;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: #F5F7FA;
            color: var(--text-dark);
            padding-top: 56px;
            line-height: 1.6;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: white;
            display: flex;
            align-items: center;
            padding: 0 16px;
            z-index: 1000;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
        
        .back-btn {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: none;
            border: none;
            color: #333;
            font-size: 20px;
        }
        
        .nav-title {
            flex: 1;
            text-align: center;
            font-size: 18px;
            font-weight: 600;
            margin: 0;
        }
        
        /* 协议容器 */
        .policy-container {
            background-color: white;
            border-radius: 12px 12px 0 0;
            padding: 20px 16px;
            min-height: calc(100vh - 56px);
        }
        
        /* 协议标题 */
        .policy-title {
            font-size: 20px;
            font-weight: 700;
            text-align: center;
            margin-bottom: 24px;
            color: var(--text-dark);
        }
        
        .policy-meta {
            font-size: 13px;
            color: var(--gray);
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 16px;
            border-bottom: 1px solid #eee;
        }
        
        /* 章节样式 */
        .policy-section {
            margin-bottom: 24px;
        }
        
        .section-heading {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 12px;
            color: var(--primary);
        }
        
        .section-content {
            font-size: 14px;
            color: var(--text-light);
            margin-bottom: 16px;
        }
        
        .section-content p {
            margin-bottom: 12px;
        }
        
        .section-content ul {
            margin-bottom: 12px;
            padding-left: 20px;
        }
        
        .section-content li {
            margin-bottom: 8px;
        }
        
        /* 强调文本 */
        .highlight {
            color: var(--primary);
            font-weight: 500;
        }
        
        /* 底部按钮 */
        .policy-actions {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: white;
            padding: 12px 16px;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
            display: flex;
            gap: 10px;
        }
        
        .action-btn {
            flex: 1;
            padding: 12px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 500;
            border: none;
            text-align: center;
        }
        
        .decline-btn {
            background-color: var(--light-gray);
            color: var(--text-dark);
        }
        
        .accept-btn {
            background-color: var(--primary);
            color: white;
        }
        
        /* 滚动进度 */
        .scroll-progress {
            position: fixed;
            top: 56px;
            left: 0;
            height: 3px;
            background-color: var(--primary);
            z-index: 999;
            width: 0%;
        }
    </style>
</head>
<body>
    <!-- 滚动进度条 -->
    <div class="scroll-progress" id="scrollProgress"></div>
    
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="back-btn" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <h1 class="nav-title">隐私协议</h1>
    </div>
    
    <!-- 协议内容容器 -->
    <div class="policy-container" id="policyContent">
        <h2 class="policy-title">用户隐私政策协议</h2>
        <div class="policy-meta">
            生效日期：2023年10月1日 ｜ 版本号：V2.3
        </div>
        
        <!-- 协议章节 -->
        <div class="policy-section">
            <h3 class="section-heading">一、总则</h3>
            <div class="section-content">
                <p>欢迎使用我们的社交平台服务。我们非常重视用户的隐私保护，本隐私政策旨在向您说明我们如何收集、使用、存储和保护您的个人信息，以及您享有的与个人信息相关的权利。</p>
                <p>请您在使用我们的服务前，仔细阅读并理解本隐私政策。如果您不同意本隐私政策的任何内容，您应立即停止使用我们的服务。当您使用我们提供的任一服务时，即表示您已同意我们按照本隐私政策来收集、使用、存储和保护您的相关信息。</p>
            </div>
        </div>
        
        <div class="policy-section">
            <h3 class="section-heading">二、我们收集的信息</h3>
            <div class="section-content">
                <p>为了向您提供更好的服务，我们可能会收集以下类型的信息：</p>
                <ul>
                    <li><span class="highlight">基本信息</span>：包括您的姓名、手机号码、电子邮箱、头像、昵称等您在注册或使用服务时提供的信息；</li>
                    <li><span class="highlight">使用信息</span>：包括您使用我们服务时的操作记录、浏览记录、发布内容、互动数据（如点赞、评论、分享）等；</li>
                    <li><span class="highlight">设备信息</span>：包括您使用的设备型号、操作系统、唯一设备标识符、IP地址、网络类型等；</li>
                    <li><span class="highlight">位置信息</span>：当您使用与位置相关的服务时，我们可能会收集您的地理位置信息（您可以通过设备设置关闭位置权限）。</li>
                </ul>
            </div>
        </div>
        
        <div class="policy-section">
            <h3 class="section-heading">三、信息的使用方式</h3>
            <div class="section-content">
                <p>我们收集的信息将用于以下目的：</p>
                <ul>
                    <li>为您提供服务并维护服务的正常运行；</li>
                    <li>改进我们的服务质量，开发新的服务功能；</li>
                    <li>为您提供个性化的内容推荐和广告服务；</li>
                    <li>保障服务安全，防范欺诈等违法活动；</li>
                    <li>根据法律法规或监管要求进行信息披露。</li>
                </ul>
                <p>我们不会将您的个人信息用于与本隐私政策声明不一致的目的，除非获得您的另行授权。</p>
            </div>
        </div>
        
        <div class="policy-section">
            <h3 class="section-heading">四、信息的共享与披露</h3>
            <div class="section-content">
                <p>我们尊重您的隐私，不会向第三方出售您的个人信息。在以下情况下，我们可能会共享您的信息：</p>
                <ul>
                    <li>获得您的明确同意后；</li>
                    <li>为了提供您要求的服务，而必须与第三方共享您的信息；</li>
                    <li>根据法律法规、司法机关或行政主管部门的要求；</li>
                    <li>为了保护我们的用户、服务提供者或公众的合法权益。</li>
                </ul>
            </div>
        </div>
        
        <div class="policy-section">
            <h3 class="section-heading">五、信息的存储与保护</h3>
            <div class="section-content">
                <p>我们将按照法律法规的要求存储您的个人信息，并采取以下安全措施保护您的信息：</p>
                <ul>
                    <li>采用加密技术保护数据传输和存储；</li>
                    <li>建立严格的访问控制和安全管理制度；</li>
                    <li>定期进行安全评估和漏洞检测。</li>
                </ul>
                <p>您的个人信息将在实现本政策所述目的所必需的期限内保留，超出保留期限后，我们将删除或匿名化处理您的信息。</p>
            </div>
        </div>
        
        <div class="policy-section">
            <h3 class="section-heading">六、您的权利</h3>
            <div class="section-content">
                <p>您对您的个人信息享有以下权利：</p>
                <ul>
                    <li><span class="highlight">访问权</span>：您可以查看您的个人信息；</li>
                    <li><span class="highlight">更正权</span>：您可以更正不准确的个人信息；</li>
                    <li><span class="highlight">删除权</span>：在特定情况下，您可以要求我们删除您的个人信息；</li>
                    <li><span class="highlight">撤回同意权</span>：您可以撤回对某些信息收集和使用的同意；</li>
                    <li><span class="highlight">账户注销权</span>：您可以申请注销您的账户。</li>
                </ul>
                <p>您可以通过应用内的设置或联系客服行使上述权利。</p>
            </div>
        </div>
        
        <div class="policy-section">
            <h3 class="section-heading">七、未成年人保护</h3>
            <div class="section-content">
                <p>我们特别重视对未成年人信息的保护。若您是未满18周岁的未成年人，在使用我们的服务前，应事先取得您的家长或法定监护人的同意。</p>
                <p>我们不会主动向未成年人收集额外的个人信息，若家长或监护人发现我们收集了未成年人的信息，可以联系我们要求删除。</p>
            </div>
        </div>
        
        <div class="policy-section">
            <h3 class="section-heading">八、政策的变更</h3>
            <div class="section-content">
                <p>我们可能会根据法律法规的变化或服务调整，不时更新本隐私政策。当政策发生变更时，我们将通过应用内通知、公告等方式告知您。</p>
                <p>变更后的隐私政策将在通知中指定的日期生效。如您继续使用我们的服务，即表示您同意接受变更后的隐私政策。</p>
            </div>
        </div>
        
        <div class="policy-section">
            <h3 class="section-heading">九、联系我们</h3>
            <div class="section-content">
                <p>如果您对本隐私政策有任何疑问、建议或投诉，您可以通过以下方式联系我们：</p>
                <ul>
                    <li>客服邮箱：privacy@example.com</li>
                    <li>客服电话：400-123-4567</li>
                    <li>工作时间：周一至周五 9:00-18:00</li>
                </ul>
                <p>我们将在收到您的反馈后15个工作日内给予回复。</p>
            </div>
        </div>
        
        <!-- 底部留白，避免被底部按钮遮挡 -->
        <div style="height: 80px;"></div>
    </div>
    
    <!-- 底部操作按钮 -->
    <div class="policy-actions">
        <button class="action-btn decline-btn" id="declineBtn">拒绝</button>
        <button class="action-btn accept-btn" id="acceptBtn">同意</button>
    </div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 返回按钮
        document.getElementById('backBtn').addEventListener('click', function() {
            history.back();
        });
        
        // 同意按钮
        document.getElementById('acceptBtn').addEventListener('click', function() {
            // 存储用户同意状态
            localStorage.setItem('privacyAccepted', 'true');
            // 返回上一页或执行其他操作
            history.back();
        });
        
        // 拒绝按钮
        document.getElementById('declineBtn').addEventListener('click', function() {
            if (confirm('如果拒绝隐私政策，您可能无法正常使用我们的服务。确定要拒绝吗？')) {
                // 清除可能的同意状态
                localStorage.removeItem('privacyAccepted');
                // 返回上一页或引导用户离开
                history.back();
            }
        });
        
        // 滚动进度条
        window.addEventListener('scroll', function() {
            const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
            const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
            const scrolled = (winScroll / height) * 100;
            document.getElementById("scrollProgress").style.width = scrolled + "%";
        });
        
        // 检查是否已同意隐私政策
        if (localStorage.getItem('privacyAccepted') === 'true') {
            // 可以在这里隐藏按钮或执行其他操作
            console.log('用户已同意隐私政策');
        }
    </script>
</body>
</html>
